<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showABS">
        <div class="header-abs-back iconfont">&#xeb15;</div>
    </router-link>
        <div 
            class="header-fixed" 
            v-show="!showABS"
            :style="opacityStyle"    
            >
        景点详情
        <router-link to="/"><div class="header-fixed-back iconfont">&#xeb15;</div></router-link>
    </div>
  </div>
</template>

<script>
export default {
    name: 'DetailHeader',
    data(){
        return{
            showABS: true,
            opacityStyle: {
                opacity: 0 
            }
        }
    },
    methods:{
        handleScroll(){
            const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
            if(top > 60){
                let opacity = top / 140
                opacity = opacity > 1 ? 1 : opacity
                this.opacityStyle = {opacity}
                this.showABS = false
            }else{
                this.showABS = true
            }
        }
    },  
    mounted(){
        window.addEventListener('scroll',this.handleScroll)
    },
    destroyed(){
        window.removeEventListener('scroll',this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .header-abs{
        position: absolute;
        left: .2rem;
        top: .2rem;
        width: 0.8rem;
        height: .8rem;
        text-align: center;
        line-height: .8rem;
        border-radius: .4rem;
        background: rgba(0,0,0,.8);
    }
    .header-abs-back{
        color:#fff;
        font-size: .4rem;
    }
    .header-fixed{
        z-index 2
        position:fixed;
        top: 0
        left: 0
        right: 0
        height: $headerHeight 
        line-height: $headerHeight 
        text-align: center
        color: #fff
        background-color: $bgColor
        font-size: .32rem
    }
    .header-fixed-back{
        width: .64rem
        text-align: center
        font-size: .4rem
        position: absolute
        top: 0
        left: 0
        color: #fff
    } 
</style>